<template>
  <div>
    <h2>{{ rap }}</h2>
    <!-- <video :src="musicVideo" controls></video> -->
    <van-swipe class="my-swipe"  indicator-color="orange">
      <van-swipe-item><video class="my-video" src="/assets/唱歌3.mp4" controls></video></van-swipe-item>
      <van-swipe-item><video class="my-video" src="/assets/唱歌2.mp4" controls></video></van-swipe-item>
      <van-swipe-item><video class="my-video" src="/assets/唱歌4.mp4" controls></video></van-swipe-item>
    </van-swipe>

  </div>
</template>
<style>
.my-video {
  width: 100%;
  height: 60%;
}
</style>
<script>

import { mapState, mapMutations } from 'vuex';
console.log()
export default {
  computed: {
    ...mapState(['rap', 'musicVideo', 'imageUrl'])
  },
  methods: {
    ...mapMutations(['updateMusicVideo', 'updateImageUrl']),
    setMusicVideo() {
      this.updateMusicVideo('/assets/唱歌1.mp4');
    },
    setImageUrl() {
      this.updateImageUrl('');
    }
  },
  mounted() {
    this.setMusicVideo();
    this.setImageUrl();
  console.log('组件已经挂载！');
  // 打印mapState上的数据
  console.log(this.rap, this.musicVideo, this.imageUrl);


  }
}
</script>
